<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改内容管理')"/>
    <th:block th:include="include :: select2-css"/>
    <link href="/css/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-article-edit" th:object="${article}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <div class="col-sm-12">
                <div id="jsoneditor" style="width: 100%; height: 700px;"></div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script src="/js/jsoneditor.min.js"></script>
<script type="text/javascript" th:inline="javascript">
        var prefix = ctx + "wenyanwen/article";
        $("#form-article-edit").validate({
            focusCleanup: true
        });
        var hasError = false;
        var container = document.getElementById("jsoneditor");
        var options = {
            mode: 'code',
            onValidationError: function (errors) {
               if(errors && errors.length > 0){
                  hasError = true;
               }else{
                  hasError = false;
               }
            }
        };
        var editor = new JSONEditor(container, options);
        var json = JSON.parse([[${article.yiwenSentence}]]);
        editor.set(json);

        function submitHandler() {

            if(hasError){
               $.modal.alertWarning("数据格式错误,请检查修正后再提交");
               return;
            }

            if ($.validate.form()) {
                let yiwen = editor.get();
                let data = $('#form-article-edit').serializeArray()
                let yiwenSentence = JSON.stringify(yiwen);
                data.push({"name": "yiwenSentence", "value": yiwenSentence});
                $.operate.save(prefix + "/edit", data);
            }
        }


</script>
</body>
</html>